<template>
  <el-row style="height: 100%">
    <el-col :span="12" :xl="12" :lg="12" :md="12" :sm="0" :xs="0">
      <div class="left">
        <div class="left-top"><span>民宿预定管理系统</span></div>
        <div class="left-bottom">
          <div class="right-center">
            <img
              src="../../assets/2.5d图片.png"
              style="width: 100%; height: 100%"
            />
          </div>
          <p>欢迎使用本系统</p>
        </div>
      </div>
    </el-col>
    <el-col :span="12" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
      <div class="right">
        <router-view></router-view>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.left {
  height: 100%;
  background: #444d57;
  .left-top {
    width: 100%;
    height: 12%;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .left-bottom {
    width: 100%;
    height: 88%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .right-center {
      width: 400px;
      height: 300px;
    }
    p {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
    }
  }
}
.right {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
